<!-- 顶部操作按钮 -->
<template>
  <div class="align-items-center button-font component">
    <div class="d-fix" style="float: left">
      <!-- 上传下拉框 -->
      <!-- 模态框的触发按钮 -->
      <button
        type="button"
        class="btn btn-secondary button-css button-font"
        data-bs-toggle="modal"
        data-bs-target="#uploadModal"
      >
        <i class="bi bi-arrow-bar-up m-1"></i>上传
      </button>

      <!-- 模态框 -->
      <div
        class="modal fade"
        id="uploadModal"
        tabindex="-1"
        aria-labelledby="uploadModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="uploadModalLabel">上传文件</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div class="modal-body button-font">
              <!-- 文件上传 -->
              <div class="row">
                <!-- 上传单个文件 -->
                <div class="mb-3 col-6">
                  <FileUploadCompoent />
                </div>
                <!-- 上传多文件 -->
                <div class="mb-3 col-6">
                  <FileUploadMultipleCompoent />
                </div>
              </div>
              <!-- 拖拽上传 -->
              <div
                class="d-flex justify-content-center align-items-center text-center drag-and-drop-zone"
              >
                <a class="dropdown-item" href="#">
                  <i class="bi bi-box-arrow-in-down-left m-1"></i>拖拽上传
                </a>
              </div>
            </div>
            <div class="modal-footer pb-1 pt-1">
              <button
                type="button"
                class="btn btn-secondary button-font"
                data-bs-dismiss="modal"
              >
                关闭
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 新建文件夹按钮 -->
      <CreateFoldersCompoent />
      <!-- 新建在线文档下拉框 -->
      <div class="btn-group mr-2">
        <button
          type="button"
          class="btn btn-secondary dropdown-toggle button-css button-font"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          <i class="bi bi-pencil-square m-1"></i>新建在线文档<span
            class="caret"
          ></span>
        </button>
        <ul class="dropdown-menu button-font">
          <li>
            <a class="dropdown-item" href="#"
              ><i class="bi bi-file-earmark-word m-1"></i>在线文档</a
            >
          </li>
          <li>
            <a class="dropdown-item" href="#"
              ><i class="bi bi-filetype-pptx m-1"></i>在线PPT</a
            >
          </li>
          <li>
            <a class="dropdown-item" href="#"
              ><i class="bi bi-filetype-xlsx m-1"></i>在线表格</a
            >
          </li>
          <li>
            <a class="dropdown-item" href="#"
              ><i class="bi bi-journal-plus m-1"></i>其它</a
            >
          </li>
        </ul>
      </div>
      <!-- 批量操作按钮 -->
      <!-- <button
        type="button"
        class="btn btn-secondary mr-2 button-css button-font"
      >
        <i class="bi bi-trash m-1"></i>批量删除
      </button> -->
      <BulkDeleteButton />
      <button
        type="button"
        class="btn btn-secondary mr-2 button-css button-font"
      >
        <i class="bi bi-arrows-move m-1"></i>批量移动
      </button>
      <!-- <button
        type="button"
        class="btn btn-secondary mr-2 button-css button-font"
      >
        <i class="bi bi-arrow-bar-down m-1"></i>批量下载
      </button> -->
      <BatchDownloads />
      <button
        type="button"
        class="btn btn-secondary mr-2 button-css button-font"
      >
        <i class="bi bi-share-fill m-1"></i>批量分享
      </button>
    </div>
    <!-- 搜索框 -->
    <div class="" style="float: right">
      <div
        class="input-group input-group-sm search-input-group"
        style="
          width: 180px;
          border: 1px solid #cfd1d3;
          border-radius: 5px !important;
          margin-right: 20px;
        "
      >
        <div class="input-group-prepend">
          <button class="btn p-1" type="button" style="border: 0">
            <i class="bi bi-search p-0 m-1"></i>
          </button>
        </div>
        <input
          type="text"
          class="form-control form-control-sm no-focus button-font p-0"
          placeholder="搜索..."
          style="border: 0"
        />
      </div>
    </div>
  </div>
</template>

<script>
import FileUploadCompoent from "@/components/NetworkdiskView/FileOperateCompoent/FileUploadCompoent.vue";
import FileUploadMultipleCompoent from "@/components/NetworkdiskView/FileOperateCompoent/FileUploadMultipleCompoent.vue";
import CreateFoldersCompoent from "@/components/NetworkdiskView/FileOperateCompoent/CreateFoldersCompoent.vue";
import BatchDownloads from "@/components/NetworkdiskView/FileOperateCompoent/BulkActionButtons/BatchDownloads.vue";
import BulkDeleteButton from "@/components/NetworkdiskView/FileOperateCompoent/BulkActionButtons/BulkDeleteButton.vue";

export default {
  name: "TopactionbarCompoent",
  components: {
    FileUploadCompoent,
    FileUploadMultipleCompoent,
    CreateFoldersCompoent,
    BatchDownloads,
    BulkDeleteButton,
  },
};
</script>

<style scoped>
/* 拖拽上传样式 */
.drag-and-drop-zone {
  border: 2px dashed #ccc; /* 设置边框样式 */
  border-radius: 10px; /* 设置边框圆角 */
  padding: 20px; /* 设置内边距 */
  width: 100%; /* 设置宽度，可根据需要调整 */
  height: 200px; /* 设置高度，可根据需要调整 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  cursor: pointer; /* 鼠标悬停时变为手形 */
}

.drag-and-drop-zone:hover {
  background-color: #f5f5f5; /* 鼠标悬停时改变背景色 */
}

.drag-and-drop-zone a {
  color: #333; /* 链接文字颜色 */
  text-decoration: none; /* 去掉链接下划线 */
}
/* 你可以在这里添加额外的样式 */
.button-css {
  border-radius: 1;
  background-color: #4dd799;
  border: 0;
}
.button-font {
  /* 按钮字体大小 */
  font-size: 10px;
  font-weight: 500;
}
input::placeholder {
  font-size: 13px;
}

/* 搜索框样式 */
/* 覆盖聚焦时的样式，去除蓝色边框 */
.no-focus:focus {
  outline: none !important;
  box-shadow: none !important;
  /* 根据需要自定义边框颜色 */
  border-color: inherit !important;
}

/* 搜索输入框和按钮的样式 */

/* 添加图标和输入框之间的间距 */
.search-input-group .input-group-prepend .btn {
  padding-right: 0.5rem; /* 右侧内边距，用于与输入框保持间距 */
}
</style>
